<template>
  <div class="user-info">
    <el-avatar
      src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
    ></el-avatar>
    <el-dropdown>
      <span> {{ name }} </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="exit">
            <el-icon color="#409EFC">
              <circle-close></circle-close>
            </el-icon>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
/* 获取用户信息 */
import { useStore } from '@/store';
import { ref } from 'vue';
const store = useStore();
const name = ref('');
name.value = store.state.login.name;
/* 退出登录*/
import localCache from '@/utils/localCache';
import router from '@/router';
const exit = () => {
  localCache.clearCache();
  router.push('/login');
};
</script>

<style scoped lang="less">
.user-info {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>
